<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    width="700px"
  >
    <el-row
      type="flex"
      :gutter="20"
    >
      <el-col :span="12">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleFormRef"
          label-width="100px"
        >
          <el-form-item
            label="角色名称"
            prop="name"
          >
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item
            label="角色编码"
            prop="code"
          >
            <el-input v-model="ruleForm.code" />
          </el-form-item>
          <el-form-item
            label="描述"
            prop="description"
          >
            <el-input v-model="ruleForm.description" />
          </el-form-item>
          <el-form-item
            label="排序"
            prop="orderNum"
          >
            <el-input v-model.number="ruleForm.orderNum" />
          </el-form-item>
          <el-form-item
            v-if="isEditDialog"
            label="状态"
            prop="status"
          >
            <el-switch
              v-model="ruleForm.status"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item
            label="是否显示"
            prop="hidden"
          >
            <el-switch
              v-model="ruleForm.hidden"
              active-text="显示"
              inactive-text="隐藏"
              :active-value="false"
              :inactive-value="true"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="12">
        <el-form
          label-width="120px"
          label-position="top"
        >
          <el-form-item label="角色可见菜单">
            <menu-tree v-model:menusId="ruleForm.menus" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button
          type="primary"
          @click="submit"
        >
          确 定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'
import { createRoles, editRoles, getRoleInfo } from '@/api/system'
import useEditDialog from '@/hooks/useEditDialog'
import MenuTree from './MenuTree.vue'

export default defineComponent({
  name: 'RoleEditDialog',
  emits: ['update-list'],
  components: {
    MenuTree
  },
  setup(props, { emit }) {
    const DEFAULT_FORM = {
      name: '', // 名称
      code: '', // 编码
      description: '', // 描述
      orderNum: '', // 排序
      hidden: false,
      menus: []
    }
    const rules = {
      // 表单校验规则
      name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
      code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
      orderNum: [{ type: 'number', message: '请输入正确的排序', trigger: 'blur' }]
    }

    const { dialogVisible, title, ruleForm, ruleFormRef, open, close, submit, isEditDialog } =
      useEditDialog({
        createApi: createRoles,
        editApi: editRoles,
        defaultForm: DEFAULT_FORM,
        emit
      })

    const getDetail = async () => {
      const res = await getRoleInfo(ruleForm.value.id)
      ruleForm.value = {
        ...res.data,
        menus: res.data.menus.map((item) => item.id)
      }
    }

    watch(dialogVisible, () => {
      if (dialogVisible.value) {
        if (isEditDialog.value) {
          getDetail()
        } else {
          ruleForm.value.menus = null
        }
      }
    })

    return {
      ruleFormRef,
      ruleForm,
      rules,
      dialogVisible,
      isEditDialog,
      title,
      open,
      close,
      submit
    }
  }
})
</script>
